<!-- src/components/example/example.vue -->
<template>
  <button class="example" :class="`type--${type}`">
    <span>{{ label }}</span>
  </button>
</template>

<script setup lang="ts">
withDefaults(defineProps<{
  label?: string;
  type?: 'default' | 'primary' | 'danger';
}>(), {
  label: 'Example',
  type: 'default',
});
</script>

<style scoped lang="scss">
.example {
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.2s;

  &.type--default {
    background: #f0f0f0;
    color: #333;
  }

  &.type--primary {
    background: #409eff;
    color: #fff;
  }

  &.type--danger {
    background: #f56c6c;
    color: #fff;
  }
}
</style>